<template>
  <div class="about">
    <input type="text" v-model="user.dog.name" placeholder="请输入内容" />
    <hr />
    <h1>firstName: {{ firstName }}</h1>
    <h1>lastName: {{ lastName }}</h1>
    <hr />
    <h1>fullName: {{ fullName }}</h1>
    <button @click="updateFirstName">update firstName</button>
    <button @click="updateLastName">update lastName</button>
  </div>
</template>

<script>
import { ref, computed, watch, reactive } from "vue";
export default {
  setup() {

    const user = reactive({
      dog: {
        name: "",
      },
    });

    // 基于基本数据类型创建的响应式数据
    const firstName = ref("jack");
    const lastName = ref("ma");

    // 添加数据侦听器
    // newValue: 系统自动注入的参数, 表示数据更新之后的值
    // oldValue: 系统自动注入的参数, 表示数据更新之前的值
    watch(firstName, function (newValue, oldValue) {
      console.log(newValue, oldValue, "firstName数据更新了");
    });

    watch(user, function (newValue) {
      console.log(newValue, "user数据更新了");
    });

    // 创建一个计算属性
    const fullName = computed(function () {
      return `${firstName.value} ${lastName.value}`;
    });
    return {
      firstName,
      lastName,
      fullName,
      user,
      updateFirstName: function () {
        this.firstName = "云";
      },
      updateLastName() {
        this.lastName = "马";
      },
    };
  },
};
</script>

<style>
.about {
  background: lightgreen;
  margin: 10px 0;
  padding: 10px;
}
</style>